<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />
    <style>
        body{
            height: 100% ;
            overflow: hidden;
            background: white;
        }
        .table-responsive{
            height:calc(100% - 90px)
        }
        .bootstrap-table{
            height:100%
        }
        .fixed-table-container{
            height:calc(100% - 60px) !important;
        }

        .form-title {
            height: 40px;
            /*min-width: 100px;*/
            text-align: right;
        }
        .checkHead table .form-value input{
            height: 34px;
            width: 200px;
        }
        .table th{
            text-align: center;
        }
        .table{
            text-align: center;
        }
        .modal-dialog {
            width: 1000px;
            margin: 30px auto;
        }
        .detail_a{
            cursor: pointer;
        }
        .order_user_detail{
            border: 0;
        }
        .order_user_detail thead tr{
            font-size: 15px;
            font-weight: bold;
        }
        .order_user_detail tr{
            text-align: center;
            border-bottom: 1px solid #999;
        }
        .order_user_detail tr td{
            height: 40px;
            line-height: 40px;
        }
        .order_user_detail tr th{
            text-align: center;
            height: 35px;
            line-height: 35px;
            font-size: 15px;
            font-weight: bold;
        }
        .supplies_order_detail{
            width: 100%;
            border: 0;
        }
        .supplies_order_detail tr th{
            text-align: center;
            height: 35px;
            line-height: 35px;
            font-size: 15px;
            font-weight: bold;
        }
        .supplies_order_detail tr{
            text-align: center;
            border-bottom: 1px solid #999;
            height: 40px;
            line-height: 40px;
        }
        .product_order_detail{
            width: 100%;
            border: 0;
        }
        .product_order_detail tr th{
            text-align: center;
            height: 35px;
            line-height: 35px;
            font-size: 15px;
            font-weight: bold;
        }
        .product_order_detail tr{
            text-align: center;
        }
        .product_order_detail tr td{
            height: 40px;
            line-height: 40px;
        }
        .popover_div{
            border: 1px solid #999;
            position: absolute;
            width: 130px;
            /*height: 160px;*/
            background: #fff;
            top:25px;
            left: 25px;
            z-index: 99999;
            border-radius: 5px;
            border-bottom: 0;
        }
        .popover_div ul{
            /*margin-top:8px;*/
        }
        .popover_div ul li{
            height:25px;
            line-height:25px;
            border-bottom:1px solid #999;
        }
        .popover_div div{
            width: 60px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #999;
            margin-right: 10px;
            margin-top: 10px;
            cursor: pointer;
        }
        .order_select{
            width: 200px;
            height: 34px;
        }
    </style>
</head>
<body>
<div id="body" style="height: 100%;">
<!-- 订单详情 弹出框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog"  >
        <div class="modal-content" style="width: 1000px;height: 600px;">
            <div class="modal-header" style="width:100%;height: 50px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">订单详情:</h4>
            </div>
            <div class="modal-body" style="overflow: auto; width: 100%;height: 485px;">
                <form class="form-horizontal" role="form">
                    <p>用户信息：</p>
                    <br/>
                    <table class="order_user_detail" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>用户店铺名称</th>
                                <th>联系人</th>
                                <th>联系人电话</th>
                                <th>店铺地址</th>
                            </tr>
                        </thead>
                        <tr>
                            <td>{{order_data.name}}</td>
                            <td>{{order_data.user_name}}</td>
                            <td>{{order_data.phone}}</td>
                            <td>
                                <textarea style="line-height: 17px;margin-top: 10px;" rows="5" cols="50">{{order_data.addr}}</textarea>
                            </td>
                        </tr>
                        </table>
                    <br/>
                    <p>商户信息：</p>
                    <br/>
                    <table class="supplies_order_detail">
                        <thead>
                            <tr>
                                <th>商户店铺名称</th>
                                <th>联系人</th>
                                <th>联系人电话</th>
                                <th>店铺地址</th>
                                <th>配送时间</th>
                            </tr>
                        </thead>
                        <tr>
                            <td>{{order_data.sup_name}}</td>
                            <td>{{order_data.manager}}</td>
                            <td>{{order_data.manager_tel}}</td>
                            <td>
                                <textarea style="line-height: 17px;margin-top: 10px;" rows="5" cols="40">{{order_data.address}}</textarea>
                            </td>
                            <td>{{order_data.send_time}}</td>
                        </tr>
                    </table>
                    <br/>
                    <p>订单商品信息：</p>
                    <br/>
                    <table border="1" class="product_order_detail">
                        <thead>
                            <tr>
                                <th>商品名称</th>
                                <th>规格</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>总额</th>
                                <th>类型</th>
                                <th>是否含税</th>
                                <th>产地</th>
                                <th>用户对商户评价</th>
                            </tr>
                        </thead>
                        <tr v-for="value in order_data.pro_info">
                            <td>{{value.pro_name}}</td>
                            <td>{{value.specification_name}}</td>
                            <td>{{value.price}}</td>
                            <td>{{value.num}}</td>
                            <td>{{value.total_price}}</td>
                            <td>{{value.type}}</td>
                            <td>{{value.is_include_tax}}</td>
                            <td>{{value.origin}}</td>
                            <td>
                                <textarea readonly style="line-height: 17px;margin-top: 10px;" rows="5" cols="30">{{value.comment}}</textarea>
                            </td>
                        </tr>
                    </table>
                    <br/>
                    <p>收货地址：</p>
                    <table class="product_order_detail">
                        <tr style="border-bottom: 1px solid #999;text-align: left;">
                            <td style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{order_data.addr}}</td>
                        </tr>
                    </table>
                    <br/>
                    <table>
                        <tr>
                            <td class="form-title">
                                商户对用户的评价：
                            </td>
                            <td class="form-value">
                                <textarea readonly cols="80" rows="5" type="text" class="search" >{{order_data.comment}}</textarea>
                            </td>
                        </tr>

                    </table>
                </form>
            </div>
            <div class="modal-footer" style="width:100%;height: 65px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

    <div class="modal fade" id="countyModal" tabindex="-1" role="dialog" aria-labelledby="countyModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="countyModalLabel">选择郡:</h4>
                </div>
                <div class="modal-body">
                    <div class="zTreeDemoBackground left" id="div_tree" style="">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="saveCounty();" data-dismiss="modal">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

<!--搜索-->

<div class="checkHead" style="padding-top: 10px;height: 90px;" >
    <table class="checkHead-table" style="/*position: absolute;right: 0px;*/">
        <tr>
            <td class="form-title">
                订单号：
            </td>
            <td class="form-value">
                <input v-model="search.order_no" type="text" class="search" placeholder="请输入订单号"/>&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td class="form-title">
                商品：
            </td>
            <td class="form-value">
                <input v-model="search.pro_name" type="text" class="search" placeholder="请输入商品名称" />&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td class="form-title">
                用户手机号：
            </td>
            <td class="form-value">
                <input v-model="search.phone" type="text" class="search" placeholder="请输入手机号" />&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
        </tr><tr>
            <td class="form-title">
                订单状态：
            </td>
            <td class="form-value">
                <select v-model="search.status" class="order_select">
                    <option value="">全部</option>
                    <option value="1">待处理</option>
                    <option value="2">待发货</option>
                    <option value="3">待确认</option>
                    <option value="4">待评价</option>
                    <option value="5">用户已评价</option>
                    <option value="7">商户已评价</option>
                    <option value="6">已取消</option>
                </select>
                <!--<input v-model="search.status" type="text" class="search" placeholder="请输入订单状态" />&nbsp;&nbsp;&nbsp;&nbsp;-->
            </td>
            <td class="form-title">
                下单日期：
            </td>
            <td class="form-value">
                <input v-model="search.add_time" type="text" class="search" id="startTime" placeholder="请选择下单日期" />&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td class="form-title">
                地区：
            </td>
            <td class="form-value">
                <input v-model="search.city" type="text" class="search county" readonly="readonly" placeholder="请选择城市" />&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
            <td>
                <button class="btn btn-default" v-on:click="searchs(1)">
                    <i class="icon-refresh align-top bigger-125"></i>
                    查询
                </button>
                <button class="btn btn-default" v-on:click="refresh">
                    <i class="icon-reply align-top bigger-125"></i>
                    重置
                </button>
            </td>
        </tr>
    </table>

</div>


<div class="table-responsive" style="margin-top: 0px;background: white;">
    <table class="table" id="order_table">
    </table>
</div>
</div>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/supplies/vue-validator.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/ztree/jquery.ztree.all.min.js"></script>
<script src="__JS__/supplies/laydate/laydate.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script>

    var search = {};

    var setting = {
        view: {
            selectedMulti: false
        },
        async: {
            enable: true,
            url: "{:url('apishop/Index/getAreaTree')}",
            autoParam: ["name", "nameEn"],
            otherParam: { "otherParam": "zTreeAsyncTest" },
            dataFilter: filter
        },
        callback: {
            beforeClick: beforeClick,
            beforeAsync: beforeAsync,
            onAsyncError: onAsyncError,
            onAsyncSuccess: onAsyncSuccess
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }
    function beforeClick(treeId, treeNode) {
        if (!treeNode.isParent) {
            {
            }
        } else {
            return true;
        }
    }
    var log, className = "dark";
    function beforeAsync(treeId, treeNode) {

        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeAsync ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
        return true;
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        showLog("[ " + getTime() + " onAsyncError ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        showLog("[ " + getTime() + " onAsyncSuccess ]&nbsp;&nbsp;&nbsp;&nbsp;" + ((!!treeNode && !!treeNode.name) ? treeNode.name : "root"));
    }

    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    function saveCounty(){
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getSelectedNodes();
        if(nodes.length == 0){
            alert("请选择郡");
            return false;
        }
        vm.search.addr = nodes[0].name;
        $(".county").val(nodes[0].name);
    }



    $(function () {
        getDate("startTime");
        $(".area_tree").on("click",function(){
            $('#areaTreeModal').modal({
                keyboard: true
            });
        })
        $.fn.zTree.init($("#treeDemo"), setting);

        $(".county").on("click",function(){
            $('#countyModal').modal({
                keyboard: true
            })
        })
    });

    /*
     * @description :获取日期插件
     * @author : peng huaneng
     * @date : 2018/2/24 16:30
     */
    function getDate(location) {
        laydate.render({
            elem: '#'+location ,//指定元素
            max:0,
            type: 'date' ,
            trigger: 'click', //单击确认 只适合 date
//            lang: 'en',//国际版
            showBottom: false //不显示底部
            ,done: function(value, date){
                vm.search.add_time = value;
            }
        });
    }

    vm = new Vue({
        el : "#body" ,
        data:{
            search:{
                status : '',
            },
            order_id :0 ,
            orderStatus:"",
            order_data : {},

        } ,
        methods:{
            searchs : function (index) {
                search = vm.search;
                if (index == 1) {
                    $("#order_table").bootstrapTable('refresh');
                } else {
                    $("#order_table").bootstrapTable('refresh');
                }
            },
            orderDetails : function (id) {
                $.ajax({
                    url: '{:url("admin/Order/getOrderInfo")}',
                    type: "POST",
                    data: {'id':id},
                    success: function (data) {
                        vm.order_data = data.data;
                    }
                })
            },
            saveArea:function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes = zTree.getSelectedNodes();
                if(nodes.length == 0){
                    alert("请选择郡");
                    return false;
                }
                $(".area_tree").val(nodes[0].name);
            },
            refresh : function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.checkAllNodes(false);
                this.search = {};
            }
        }
    });
    var tableheight = document.documentElement.clientHeight - 96;
    $('#order_table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Order/orderList")}',
        sortable: true,                     //是否启用排序
        sortName : 'o.add_time',//初始化的时候排序的字段
        sortOrder: "desc",                   //排序方式
        columns: [
            {
                checkbox: true
            }, {
                field: 'order_no',
                align: 'center',
                title: '订单号',
                width: 120
            }, {
                field: 'name',
                align: 'center',
                title: '商家名称',
                sortable: true
            }, {
                field: 'user_name',
                align: 'center',
                title: '用户名称',
                sortable: true
            }, {
                field: 'money',
                align: 'center',
                title: '订单金额'
            }, {
                field: 'add_time',
                align: 'center',
                title: '下单时间'
            },{
                field: 'status',
                align: 'center',
                title: '状态'
            }, {
                align: 'center',
                title: '操作',
                width:200,
                formatter: editOrder
            }
        ],
        queryParamsType : 'limit',
        queryParams: function (params) {
            var param = {
                search: search,
//                pageSize: params.pageSize,
//                pageNumber: params.pageNumber,
                pageSize : params.limit,
                pageNumber : params.offset,
                sortOrder: params.order,//排序
                sortName:params.sort//排序字段
            };
            return param;
        },
        responseHandler: function (res) {
            if(res.status == 260){
                window.parent.location.href = '/admin/index/login';return;
            }
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });

    function getOrderNum(value) {
        vm.order_id= value ;
    }

    function orderDetail(id) {
        $('#exampleModal').modal({
            keyboard: true
        });
        vm.orderDetails(id);
    }

    function  editOrder  (val, row, index) {
        var divStr = "<div style='position: relative;'>"
        var detailStr = "<a href='javascript:void(0);' class='detail_a'data-toggle=\"modal\" onclick='orderDetail(" + row.id + ")'>查看</a>&nbsp;&nbsp;" +
            "<a href='javascript:void(0);' class='detail_a popover_a' onclick='status_click("+index+","+row.id+");'>修改订单状态</a>" +
            "<div class='popover_div"+index+" popover_div form-inline' style='display: none;'>" +
            " <ul>" +
            "   <li><a href='javascript:void(0);' onclick='edit_order_status(1,"+index+")'>待处理</a></li>" +
            "   <li><a href='javascript:void(0);' onclick='edit_order_status(2,"+index+")'>待发货</a></li>" +
            "   <li><a href='javascript:void(0);' onclick='edit_order_status(3,"+index+")'>待确认</a></li>" +
            "   <li><a href='javascript:void(0);' onclick='edit_order_status(4,"+index+")'>待评价</a></li>" +
            "   <li><a href='javascript:void(0);' onclick='edit_order_status(5,"+index+")'>用户已评价</a></li>" +
            "   <li><a href='javascript:void(0);' onclick='edit_order_status(7,"+index+")'>商户已评价</a></li>" +
            "   <li><a href='javascript:void(0);' onclick='edit_order_status(6,"+index+")'>已取消</a></li>" +
            "   <li><a href='javascript:void(0);' onclick='close_div("+index+")'>关闭</a></li>" +
            "</ul>" +
            "</div>";
        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }
    function close_div(index){
        $(".popover_div").hide();
    }
    function status_click(index,id){
        vm.order_id = id;
        $(".popover_div").css("display","none");
        $(".popover_div"+index).css("display","block");
    }
    function edit_order_status(status,index){
        vm.orderStatus = status;
        $.ajax({
            url:"{:url('admin/Order/updateOrderStatus')}",
            type:"POST",
            data:{'id':vm.order_id,'status':status},
            success:function (data) {
                layer.msg("修改成功");
                $("#order_table").bootstrapTable('refresh');
            }
        });
        $(".popover_div"+index).css("display","none");
    }
</script>
</body>
</html>